<template>
  <cu-layout :navProp="{ placeholder: true, bgColor: 'rgba(255,255,255)', title: '账单评价' }" :bgStyle="{ bgColor: 'rgb(255,255,0)' }">
    <view :class="[`${prefixCls}-lease-container`]">
      <view class="tips">给您的管家打分吧~</view>
      <view class="form-item" v-for="(item, index) in question" :key="index">
        <view class="text">{{ item.text }}</view>
        <view class="item-value correct" :class="{ active: item.value == 1 }">是</view>
        <view class="item-value" :class="{ active: item.value == 0 }">否</view>
      </view>
      <view class="text-area">
        <uv-textarea v-model="content" disabled count maxlength="100" placeholder="我们会虚心接受您的建议，做到更好~"></uv-textarea>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { checkoutEvaluate } from '../api'
export default {
  name: 'lease',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      value: '',
      content: '',
      question: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await checkoutEvaluate({ id })
      this.question = data.question
      this.content = data.content
      console.log('data', data)
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('lease-container')} {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  padding: 15px;
  .tips {
    text-align: center;
  }
  .text-area {
    margin: 20px 0;
  }
  .form-item {
    display: flex;
    margin: 30px 0;
    .correct {
      margin-left: auto;
      margin-right: 2px;
    }
    .active {
      background: $uv-primary;
      color: white;
      border-color: white !important;
    }
    .item-value {
      font-size: 12px;
      padding: 5px 20px;
      border: 1rpx solid black;
      border-radius: 5px;
    }
  }
}
</style>
